/*api*/
import {getStorageForDetailTabbar, setStorageForDetailTabbar} from "@src/api/SystemApi";
/*enum*/
import {
    BaseTabBarUsualEnum,
    StorageHttpParamsForModuleType,
    StorageHttpParamsForTerminalType
} from "@src/component/common/BaseTabBar/enum";
/*util*/
import { cloneDeep } from "lodash";
import { computedTabList } from "@src/util/tabBarUtils";
import { useStateSystemViewLayout } from 'pub-bbx-utils'
const { getSystemViewLayout } = useStateSystemViewLayout() // 获取通栏还是平铺
export default {
    name: 'multi-row-mixin',
    data() {
        return {
            taskLayout: 2, // 布局方式 1:通栏 2:左右
            leftActiveTab: '',
            rightActiveTab: '',
            tabPosition: '', // 记录tab位置  left|right
            leftTabBarList: [],
            rightTabBarList: [],
            taskLayoutTabBarList: [],
            formCellCount: 1,
        }
    },
    computed: {
        hidePartCollapse() {
            if(this.taskLayout === 2) return '';

            if(this.taskLayout === 1) {
                return this.tabPosition === 'left' ? 'right' : 'left';
            }
        },
    },
    methods: {
        // 打开通栏的弹框
        openBaseLayoutModal() {
            this.$refs.bizLayoutModal?.open()
        },
        // 切换附加组件
        tabBarChangeItem(item) {
            let tabName = BaseTabBarUsualEnum.TabBarListItemKey;

            this.tabPosition = item.position
            // 通栏导航和左侧导航共用leftActiveTab数据
            if (this.taskLayout === 1 || item.position == 'left') {
                this.leftActiveTab = item[tabName];
            }
            // 右侧导航
            if (item.position == 'right') {
                this.rightActiveTab = item[tabName];
            }
        },
        // 附加组件筛选存储到后端
        async tabBarUpdateList(list, type, id) {
            try {
                const { TabBarCardInfoType, TabBarListItemKey:tabName, TabBarListItemShow:tabShow } = BaseTabBarUsualEnum;
                let list_ = list.map(item=>{
                    return {
                        cardId: item.type == TabBarCardInfoType ? item.id : item[tabName],
                        checked: item[tabShow]
                    }
                })
                let params = {
                    equipment:StorageHttpParamsForTerminalType.PC,
                    bizType:StorageHttpParamsForModuleType.TaskManage,
                    bizTypeId:`${type}_${id}`,
                    cardList:list_
                }
                // 存储右栏tabbar
                await setStorageForDetailTabbar(params)
            } catch (e) {
                console.error(e)
            }
        },
        // 通栏点击确定
        changeTaskDetailLayout(type, columns) {
            this.leftActiveTab = this.leftTabBarList?.[0]?.tabName
            this.taskLayout = type
            this.tabPosition = 'left'
            if(type === 2) {
                this.rightActiveTab = this.rightTabBarList?.[0]?.tabName
            }
            this.formCellCount = columns * 1
        },
        // 初始化菜单
        async initBanner(leftTabBarList, rightTabBarList, type, id) {
            try {
                const count = await getSystemViewLayout()
                this.taskLayout = count?.baseLayout || 2
                this.formCellCount = count?.formCellCount || 1;
            } catch (error) {
                console.warn(error, 'error try catch initBanner');
            }

            // 通栏模式tabPosition默认left
            if (this.taskLayout === 1) {
                this.tabPosition = 'left'
            }
            // 读取缓存tabbar修改右栏tabbar配置
            try {
                let { TabBarListItemKey:tabName, TabBarListItemShow:tabShow} = BaseTabBarUsualEnum;
                let params = {
                    equipment:StorageHttpParamsForTerminalType.PC,
                    bizType:StorageHttpParamsForModuleType.TaskManage, // 先用工单的把，服务商和工程师后端没有接入
                    bizTypeId:`${type}_${id}`
                }
                // 获取tabbar用户行为缓存/*  */
                let storageList = await getStorageForDetailTabbar(params);
                if(storageList.status !== 0) {
                    throw storageList.message
                }
                let storageList_ = storageList.data.map(item=>{
                    const { cardId, checked} = item;
                    return {
                        [tabName]:cardId,
                        [tabShow]:checked
                    }
                })
                rightTabBarList = computedTabList(rightTabBarList, storageList_)
                console.log(rightTabBarList, 'rightTabBarList');
            } catch (error) {
                console.warn(error, 'error try catch getStorageForDetailTabbar');
            }
            this.leftActiveTab = leftTabBarList[0].tabName;
            this.leftTabBarList = leftTabBarList;
            this.rightActiveTab = rightTabBarList[0].tabName;
            this.rightTabBarList = rightTabBarList;
        },
    },
    watch: {
        leftTabBarList: {
            handler() {
                this.taskLayoutTabBarList = cloneDeep([...this.leftTabBarList,...this.rightTabBarList].filter(item => item.tabShow));
            },
            deep: true
        },
        rightTabBarList: {
            handler() {
                this.taskLayoutTabBarList = cloneDeep([...this.leftTabBarList,...this.rightTabBarList].filter(item => item.tabShow));
            },
            deep: true
        },
    },
}